<template>
    <div class="login">
        <p>Welcome to KLB-Agent</p>
        <div class="agentForm">
            <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="auto" label-position="top"
                status-icon>
                <el-form-item label="用户名" prop="username">
                    <el-input v-model="ruleForm.username" />
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input v-model="ruleForm.password" />
                </el-form-item>
            </el-form>
            <div class="login-btn" @click="submitForm(ruleFormRef)">
                登录
            </div>
        </div>

    </div>
</template>


<script setup>

import { reactive, ref } from 'vue'
import { set_up } from '../../request/loginApi';


const ruleFormRef = ref()
const ruleForm = reactive({
    username: '',
    password: '',
})


const rules = {
    username: [
        { required: true, message: '请输入用户名', trigger: 'blur' }
    ],
    password: [
        { required: true, message: '请输入密码', trigger: 'blur' }
    ],

}

const submitForm = async () => {
    const params = {
        'email': 'oneadmin@example.com',
        'name': 'oneAdminName',
        'password': 'SecurePassword123',
    }


    await set_up(params)
}


</script>



<style lang="scss" scoped>
.login {
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 100vh;

    p {
        font-size: 32px;
    }

    .agentForm {
        width: 400px;
        padding: 80px 40px;
        background-color: #fff;
        border-radius: 10px;
        background: #ccc;

        .login-btn {
            text-align: center;
            background: #409eff;
            color: #fff;
            margin-top: 50px;
            cursor: pointer;
            padding: 5px;
            border-radius: 4px;
        }
    }
}
</style>